<template>
	<view class="pageV">
		<u-navbar title="订单详情" placeholder :autoBack="true" leftIconColor="#E6A5B4" bgColor="#00000000"
			:titleStyle="titleStyle">
		</u-navbar>

		<view class="cenV">
			<view class="orderitemV">
				<image class="image" :src="orderDetails.combo.image" mode="aspectFill"></image>
				<view class="itemRightV">
					<view class="itemTv1">{{orderDetails.combo.title}}</view>
					<view class="itemTv2">{{orderDetails.combo.memo}}</view>
					<view class="moneyV">
						<view class="itemTv3">实付款：</view>
						<view class="itemTv4">{{orderDetails.total_money}}</view>
					</view>
				</view>
			</view>
			<view class="orderCodeVV">
				<view class="titleV">订单信息</view>
				<view class="orderCodeV">
					<view class="orderCodeTv1">订单编号：</view>
					<view class="orderCodeTv2">{{orderDetails.order_sn}}</view>
				</view>
			</view>


			<view class="bottomV">
				<view v-if="orderDetails.status!=-1" @click="onCancelClick()" class="cancelTv">取消</view>
				<view v-if="orderDetails.status==0" @click="onPayClick()" class="payTv">支付</view>
			</view>
		</view>

		<u-modal  @confirm="onCancel()" @cancel="showCancel=false" :show="showCancel" :showCancelButton="true"
			content="确定要取消订单吗？"></u-modal>

		<u-modal  @confirm="onPay()" @cancel="showPay=false" :show="showPay" :showCancelButton="true"
			content="确定要支付订单吗？"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle: {
					"color": "#ffffff"
				},
				itemId: '',
				orderDetails: {},
				showCancel: false,
				showPay: false
			}
		},
		onLoad(e) {
			this.itemId = e.id;
			console.log("----", this.itemId)
			this.getOrderDetails();
		},
		methods: {
			getOrderDetails() {
				this.$api.getMyOrderDetails({
					order_id: this.itemId,
				}).then((res) => {
					this.orderDetails = res.info;
				}).catch((e) => {
					uni.$u.toast(e.msg === undefined ? "请求失败" : e.msg)
				})
			},
			onCancelClick(item) {
				this.showCancel = true;
			},
			onPayClick(item) {
				this.showPay = true;
			},
			onCancel() {
				uni.showLoading({
					title: '请稍后'
				})
				this.$api.cancelMyOrder({
					order_id: this.itemId,
				}).then((res) => {
					uni.hideLoading();
					this.mPage = 1;
					this.getOrderDetails();
					this.showCancel = false;
				}).catch((e) => {
					uni.hideLoading();
					this.showCancel = false;
					uni.$u.toast(e.msg === undefined ? "请求失败" : e.msg)
				})
			},
			onPay() {
				uni.showLoading({
					title: '请稍后'
				})
				this.$api.miNiPay({
					order_id: this.itemId,
				}).then((res) => {
					uni.hideLoading();
					this.showPay = false;
					this.payOrder(res);
				}).catch((e) => {
					uni.hideLoading();
					this.showPay = false;
					uni.$u.toast(e.msg === undefined ? "请求失败" : e.msg)
				})
			},
			payOrder(payData) {
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: payData.timeStamp,
					nonceStr: payData.nonceStr,
					package: payData.package,
					signType: payData.signType,
					paySign: payData.paySign,
					success: function(res) {
						this.getOrderDetails();
					},
					fail: function(err) {
						uni.$u.toast("支付失败");
					}
				})
			},
		}
	}
</script>

<style>
	.pageV {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}

	.cenV {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.orderitemV {
		border-radius: 10rpx;
		background: rgba(61, 61, 61, 0.39);
		margin-left: 30rpx;
		margin-right: 30rpx;
		display: flex;
		padding: 20rpx;
		margin-top: 20rpx;
	}

	.image {
		width: 180rpx;
		height: 150rpx;
		border-radius: 10rpx;
	}

	.itemRightV {
		flex: 1;
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
	}

	.itemTv1 {
		font-size: 30rpx;
		color: #ffffff;
	}

	.itemTv2 {
		font-size: 25rpx;
		color: #ffffff;
		margin-top: 10rpx;
	}

	.moneyV {
		display: flex;
		justify-content: flex-end;
		align-items: baseline;
		margin-top: 10rpx;
	}

	.itemTv3 {
		color: #999999;
		font-size: 25rpx;
	}

	.itemTv4 {
		color: #fff;
		font-size: 28rpx;
	}

	.orderCodeVV {
		display: flex;
		flex-direction: column;
		border-radius: 10rpx;
		background: rgba(61, 61, 61, 0.39);
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding: 20rpx;
		margin-top: 20rpx;
	}

	.titleV {
		color: #fff;
		font-size: 30rpx;
	}

	.orderCodeV {
		display: flex;
		margin-top: 10rpx;
	}

	.orderCodeTv1 {
		color: #eee;
		font-size: 26rpx;
	}

	.orderCodeTv2 {
		color: #eee;
		font-size: 26rpx;
	}

	.bottomV {
		display: flex;
		height: 98rpx;
		padding-left: 15rpx;
		padding-right: 15rpx;
		padding-top: 15rpx;
		padding-bottom: 15rpx;
		box-sizing: border-box;
		background-color: #454545;
		position: absolute;
		bottom: 0rpx;
		left: 0rpx;
		right: 0rpx;
	}

	.cancelTv {
		flex: 1;
		background: rgba(102, 102, 102, 0.39);
		border-radius: 44rpx;
		color: #ffffff;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 15rpx;
		margin-right: 15rpx;
	}

	.payTv {
		flex: 1;
		background: #D5FF45;
		border-radius: 44rpx;
		color: #000000;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 15rpx;
		margin-right: 15rpx;
	}
</style>
